<template>
  <div v-if="menuVisible" class="menu-container">
    <van-tabbar route active-color="#13C093">
      <van-tabbar-item replace to="/goodslist">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? home.active : home.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        replace
        to="/notifications"
        :class="{ notcount: !total_count }"
        :badge="total_count"
      >
        <span>订单中心</span>
        <template #icon="props">
          <img :src="props.active ? goodslist.active : goodslist.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/me" icon="search">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? meicon.active : meicon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import homeactive from "@/assets/images/首页默认.png";
import homeinactive from "@/assets/images/首页.png";
import acceptancelistactive from "@/assets/images/工单列表默认@2x.png";
import acceptancelistinactive from "@/assets/images/工单列表@2x.png";
import meactive from "@/assets/images/我的默认@2x.png";
import meinactive from "@/assets/images/我的选中@2x.png";
export default {
  name: "MenuTpl",
  data() {
    return {
      home: {
        inactive: homeactive,
        active: homeinactive
      },
      goodslist: {
        inactive: acceptancelistactive,
        active: acceptancelistinactive
      },
      meicon: {
        inactive: meactive,
        active: meinactive
      }
    };
  },
  computed: {
    ...mapState({
      menuVisible: state => {
        return state.menu.menuVisible;
      }
    })
  },
  watch: {},
  mounted() {},
  methods: {}
};
</script>
<style lang="scss">
.notcount {
  .van-info {
    display: none;
  }
}
.menu-container {
  height: 90px;

  .van-tabbar {
    height: 90px;
    border-top: 1px solid #e6e9eb;
    .van-tabbar-item {
      .van-tabbar-item__icon {
        img {
          height: 40px;
        }
      }
      .van-info {
        font-size: 16px;
      }
      .van-tabbar-item__text {
        span {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
